<template>
  <div>
    <div class="m-page-box">
      <Table :data="dataList" :columns="columns"></Table>
      <div class="m-page-buttom">
        <Page
          :total="dataLen"
          :page-size="pageSize"
          :page-size-opts="[5, 10, 15]"
          :show-sizer="true"
          :loading="loading"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
        ></Page>
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
import {columns} from '../js/columns'

export default {
  data () {
    return {
      dataList: [],
      dataLen: 0,
      pageSize: 10,
      loading: false,
      columns: columns()
    }
  },
  mounted () {
    this._getLoginInfo()
  },
  methods: {
    // 更改页面
    changePage (page) {
      this._getLoginInfo(this.pageSize, page)
    },
    // 更改页面页数
    changePageSize (pageSize) {
      this.pageSize = pageSize
      this._getLoginInfo(pageSize, 1)
    },
    async _getLoginInfo (pageSize, pageNum, userId) {
      const url = '/showlog'
      let pageSizeTemp = pageSize || 5
      let pageTemp = pageNum || 1
      let userIdTemp = userId || ''
      const res = await this.GET_DATA({
        dataUrl: url,
        size: pageSizeTemp,
        page: pageTemp,
        userId: userIdTemp
      })
      if (res.code === "0000") {
        this.$nextTick(() => {
          this.dataList = res.data,
            this.dataLen = res.data.data_len
        })
      }
    },
    ...mapActions({
      GET_DATA: '_GET_DATA'
    })
  }
}
</script>

<style>
</style>